{% extends 'backend/home-list.html' %}
{% load static %}
{% block cssLink %}

{% endblock %}

{% block tableItem %}
    <div class="row">

        {% for album in albums %}
            <div class="col-4 mb-5">

                <div class="bg-white p-2 shadow-primary-xs transition-hover-top transition-all-ease-250">
                    <a href="{% url 'album:album' %}"
                       class="d-block overflow-hidden overlay-dark-hover overlay-opacity-2 text-decoration-none text-dark">
                        <img class="img-fluid lazy rounded" src="https://picsum.photos/seed/picsum/500/300" alt="...">
                    </a>

                    <div class="p-3">

                        <h5 class="m-0">
                            {{ album.name }}
                        </h5>

                        <ul class="list-inline small m-0">
                            <li class="list-inline-item">
                                <a href="{% url 'album:album' %}" class="text-gray-500">Photography</a>
                            </li>

                            <li class="list-inline-item">
                                <a href="#" class="text-gray-500">Design</a>
                            </li>
                        </ul>

                    </div>
                </div>

            </div>
        {% endfor %}

    </div>
{% endblock %}
{% block selectedItems %}

{% endblock %}

{% block javaScripts %}
    {{ block.super }}

{% endblock %}